<script setup>

import {ref} from "vue"
import {useUserStore} from "@/stores/user.js"

import  Message  from "@/pulging/Message/js/Message.js";

import {modifyUserInfoAPI} from "@/api/user.js"
const userStore = useUserStore()
const userInfo = userStore.userInfo || {}

const newNickName  = ref('')

/* 修改用户NickName */
const changeNickName = async() => {
    const data = {name:newNickName.value}
    let res = await modifyUserInfoAPI(data)
    console.log(res.data);
    if (res.data.message == '修改成功') {
        Message({type: "success", text:res.data.message})
        setTimeout(close, 250)
    } else {
        Message({type: "warn", text:res.data.message})
    }
}

const emit = defineEmits(['closeModel'])


const close = () => {
  emit('closeModel')
}
</script>

<template>
  <Transition name="modal">
    <div  class="modal-mask">
      <div class="modal-container">
        <div class="modal-header">
         <h2>修改昵称</h2>
            <span class="icon iconfont" @click="close">&#xe603;</span>
        </div>  

       <div class="model-content">
        
         <div class="item">
           <p> <span>输入新的昵称</span><input  v-model="newNickName"></p>
         </div>
         
       </div>

        <div class="modal-footer">
          <button class="ok" @click="changeNickName">确认</button>
          <button class="cancal" @click="close">取消</button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<style lang="scss" scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  transition: opacity 0.3s ease;
}

.modal-container {
    width: 12.325rem;
   
    background: #FFFFFF;
    border-radius: 0.15rem;
    margin: auto;
    box-shadow: 0 0.025rem 0.1rem rgba(0, 0, 0, 0.33);
    transition: all 0.3s ease;
}

.modal-header  {
    display: flex;
    height: 1.1125rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.375rem ;
    border-bottom: 0.025rem solid rgb(245, 245, 245);
    h2 {
        font-size: 0.35rem;
        font-weight: 600;
    }

}


.model-content {
  display: flex;
  flex-direction: column;
    padding: 0.3625rem 0;
    border: 2px solid #F2F2F2;
    .item {
        display: flex;
        flex-direction: column;
        padding: 0 2.15rem 0 1.7625rem;
        margin-bottom: 0.25rem;
        p {margin-bottom: 0.1625rem;}
        span {
            font-size: 0.32rem;
            color: #999999;
            margin-right: 0.15rem;
        }
        i {
           padding-left: 2.4rem;
           font-size: 0.2rem;
           color: #999999;
            
        }
        input {
            width: 5.9125rem;
            height: 0.7625rem;
            background: #FFFFFF;
            border: 0.025rem solid #E5E5E5;
        }
    }
    
}

.modal-footer {
    padding: 0.3625rem 3.3625rem 0.8625rem 3.3625rem;
    display: flex;
    justify-content: space-between;
    button {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.35rem;
        width: 2.45rem;
        height: 0.9rem;
        background: #139DFF;
        border: none;
    }
    .ok {
        background: #139DFF;
        color: #FFFFFF;
    }
    .cancal {
        background: #139DFF;
        color: #CCCCCC;
        border: 2px solid #CCCCCC;
        background-color: rgb(255, 255, 255);
    }
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * 对于 transition="modal" 的元素来说
 * 当通过 Vue.js 切换它们的可见性时
 * 以下样式会被自动应用。
 *
 * 你可以简单地通过编辑这些样式
 * 来体验该模态框的过渡效果。
 */

.modal-enter-from {
  opacity: 0;
}

.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>